<%@ page import="com.online_video.entity.User" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    User user = (User) session.getAttribute("user");
    System.out.println(user);
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线视频网站</title>
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="../js/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script type="text/javascript" src="../js/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>

<%
    //    Object user = request.getSession().getAttribute("user");
//    System.out.println(user);

    //设置session过期时间
    session.setMaxInactiveInterval(900);

%>
<!--导航条-->
<%@include file="plugins/navbar.jsp" %>


<div class="container" style="margin-top: 60px;">
    <!--轮播图-->
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="../zqdimg/0001.jpg" alt="..." style="width: 100%;height: 400px;">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
            <div class="item">
                <img src="../zqdimg/0002.jpg" alt="..." style="width: 100%;height: 400px;">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
            <div class="item">
                <img src="../zqdimg/0003.jpg" alt="..." style="width: 100%;height: 400px;">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

    <!--热门视频-->

    <div> <!--电影专区-->
        <div class="page-header">
            <h1>电影专区 <small>Movice Area</small></h1>
        </div>
        <div class="bs-example" data-example-id="thumbnails-with-custom-content">
            <div class="row" id="moveArea">
                <%--                <div class="col-sm-6 col-md-3">--%>
                <%--                    <div class="thumbnail">--%>
                <%--                        <a href="#"><img data-src="holder.js/100%x200" alt="100%x200"--%>
                <%--                                         src="../webImg/bg.jpeg" data-holder-rendered="true"--%>
                <%--                                         style="height: 200px; width: 100%; display: block;"></a>--%>
                <%--                        <div class="caption">--%>
                <%--                            <h3>Thumbnail label</h3>--%>
                <%--                            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id--%>
                <%--                                elit non mi porta gravida at--%>
                <%--                                eget metus. Nullam id dolor id nibh ultricies vehicula ut id--%>
                <%--                                elit.</p>--%>
                <%--                            <p>播放量：12000</p>--%>
                <%--                            <p>收藏量：12000</p>--%>
                <%--                        </div>--%>
                <%--                    </div>--%>
                <%--                </div>--%>



            </div>
        </div>
    </div>

    <div><!--VIP专区-->
        <div class="page-header">
            <h1>动漫专区 <small>Comic Area</small></h1>
        </div>
        <div class="bs-example" data-example-id="thumbnails-with-custom-content">
            <div class="row" id="VIPArea">

            </div>
        </div>
    </div>


</div>


<script type="text/javascript">
    window.onload=function (){
        getVideo("动漫","VIPArea")
        getVideo("电影","moveArea")
    }
</script>
<script>
    function getVideo(category,area){
        //VIP专区AJAX回填
        $.ajax({
            //指定当前请求为异步请求
            async: true,
            //指定请求路径
            url: './video.do?action=queryAll',
            //指定请求方式
            type: 'POST',
            data: {"category": category},
            //指定响应的数据类型
            dataType: 'text',
            success: function (data) {
                if (data != null) {
                    var jsonObj = JSON.parse(data);
                    for (var i = 0; i < jsonObj.length; i++) {
                        $('#'+area+'').append('<div class="col-sm-6 col-md-3">\n' +
                            '                    <div class="thumbnail">\n' +
                            '                        <a href="./v.jsp?vid=' + jsonObj[i].vid + '" ><img data-src="holder.js/100%x200" alt="100%x200"\n' +
                            '                                         src="/online_video/img/' + jsonObj[i].img + '" data-holder-rendered="true"\n' +
                            '                                         style="height: 200px; width: 100%; display: block;"></a>\n' +
                            '                        <div class="caption">\n' +
                            '                            <h3>' + jsonObj[i].viName + '</h3>\n' +
                            '                            <p>' + jsonObj[i].describe + '</p>\n' +
                            '                            <p>播放量：' + jsonObj[i].playAmount + '</p>\n' +
                            '                            <p>收藏量：' + jsonObj[i].collect + '</p>\n' +
                            '                        </div>\n' +
                            '                    </div>\n' +
                            '                </div>');
                    }
                }
            },
            error: function (data) {
                //请求失败调用的函数
                console.log('error');
                console.log(data);
            }
        })
    }
</script>



</body>
</html>
